<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汇问</title>
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="../static/js/vue.global.js"></script>
    <style>
        /* 重置样式 - 与index.html相同 */
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
            margin:0;
            padding:0;
        }
        table {
            border-collapse:collapse;
            border-spacing:0;
        }
        fieldset, img {
            border:0;
        }
        address, caption, cite, code, dfn, em, strong, th, var {
            font-style:normal;
            font-weight:normal;
        }
        ol, ul {
            list-style: none;
            text-decoration: none;
        }
        caption, th {
            text-align:left;
        }
        h1, h2, h3, h4, h5, h6 {
            font-size:100%;
            font-weight:normal;
        }
        abbr, acronym {
            border:0;
            font-variant:normal;
        }
        sup {
            vertical-align:text-top;
        }
        sub {
            vertical-align:text-bottom;
        }
        input, textarea, select {
            font-family:inherit;
            font-size:inherit;
            font-weight:inherit;
        }
        input, textarea, select {
            font-size:100%;
        }
        legend {
            color:#000;
        }
        li {
            list-style: none;
            text-decoration: none;
        }
        
        /* 全局样式 - 与index.html相同 */
        body{
            font-size: 18px;
            font-family: 'Simsun';
            background-color: #f5f7fa;
            color: #333;
        }
        
        /* 导航栏样式 - 与index.html相同 */
        .nav{
            width: 18%;
            height: 100vh;
            background-color: #F1F4F9;
            position: fixed;
            left: 0;
            top: 0;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            z-index: 100;
        }
        
        .nav .logo{
            width: 100%;
            height: 80px;
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 15px;
        }
        
        .nav .logo img{
            height: 60px;
            margin-right: 10px;
        }
        
        .nav .logo p{
            font-size: 24px;
            font-family: 'Simsun';
            font-weight: bold;
            color: #1684FC;
        }
        
        /* 主内容区域 - 与index.html相同 */
        .main{
            width: 80%;
            margin-left: 20%;
            padding: 20px;
            min-height: 100vh;
            box-sizing: border-box;
        }
        
        .main .title{
            margin-top: 20px;
            margin-bottom: 40px;
            text-align: center;
            color: #1684FC;
            font-size: 32px;
            position: relative;
        }
        
        .main .title::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: #1684FC;
            margin: 10px auto;
            border-radius: 2px;
        }
        
        /* 分类筛选 */
        .category-filter {
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }
        
        .filter-btn {
            background: #E7F2FF;
            border: 2px solid #CEE2FF;
            border-radius: 30px;
            padding: 10px 25px;
            margin: 0 10px 15px;
            cursor: pointer;
            font-size: 18px;
            transition: all 0.3s ease;
        }
        
        .filter-btn:hover, .filter-btn.active {
            background: #1684FC;
            color: white;
            border-color: #1684FC;
        }
        
        /* AI工具卡片 */
        .ai-tools-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 20px;
        }
        
        .ai-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .ai-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }
        
        .ai-card-header {
            background: #1684FC;
            color: white;
            padding: 20px;
            display: flex;
            align-items: center;
        }
        
        .ai-icon {
            width: 50px;
            height: 50px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 24px;
            color: #1684FC;
            font-weight: bold;
        }
        
        .ai-name {
            font-size: 22px;
            font-weight: bold;
        }
        
        .ai-category {
            font-size: 14px;
            opacity: 0.85;
            margin-top: 5px;
        }
        
        .ai-card-body {
            padding: 20px;
        }
        
        .ai-description {
            color: #555;
            line-height: 1.6;
            margin-bottom: 20px;
            min-height: 100px;
        }
        
        .ai-strengths {
            background: #F1F8FF;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        
        .ai-strengths h4 {
            color: #1684FC;
            margin-bottom: 10px;
            font-size: 16px;
        }
        
        .strengths-list {
            list-style-type: none;
        }
        
        .strengths-list li {
            position: relative;
            padding-left: 20px;
            margin-bottom: 8px;
            font-size: 15px;
        }
        
        .strengths-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #1684FC;
            font-weight: bold;
        }
        
        .ai-link {
            display: block;
            background: #1684FC;
            color: white;
            text-align: center;
            padding: 12px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            transition: background 0.3s ease;
        }
        
        .ai-link:hover {
            background: #126fd3;
        }
        
        /* 页脚 */
        .footer {
            margin-top: 60px;
            text-align: center;
            color: #777;
            padding: 20px;
            border-top: 1px solid #eaeaea;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .nav {
                width: 25%;
            }
            .main {
                width: 75%;
                margin-left: 25%;
            }
        }
        
        @media (max-width: 768px) {
            .nav {
                width: 100%;
                height: auto;
                position: relative;
            }
            .main {
                width: 100%;
                margin-left: 0;
            }
            .ai-tools-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="nav" id="nav">
        <div class="logo">
            <img src="../static/image/logo.png" alt="logo">
            <p>汇问</p>
        </div>
        <div class="show">
            <svg t="1747704063142" class="fold-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23747" width="200" height="200"><path d="M109.632 673.664h519.68c25.152 0 45.568-22.016 45.568-48.896 0-26.88-20.416-48.896-45.568-48.896h-519.68c-25.216 0-45.632 22.016-45.632 48.896 0 26.88 20.48 48.896 45.632 48.896z m0-228.096h519.68c25.152 0 45.568-21.952 45.568-48.896 0-26.88-20.416-48.896-45.568-48.896h-519.68c-25.216 0-45.632 22.016-45.632 48.896 0 26.88 20.48 48.896 45.632 48.896z m3.264-219.904h795.776c26.88 0 50.56-20.352 51.328-47.168A48.896 48.896 0 0 0 911.104 128H115.328c-26.88 0-50.56 20.416-51.328 47.168a48.896 48.896 0 0 0 48.896 50.56z m619.776 447.232V348.672L960 510.784l-227.328 162.112c0 0.768 0 0.768 0 0z m178.432 122.944H115.328c-26.88 0-50.56 20.48-51.328 47.232a48.896 48.896 0 0 0 48.896 50.496h795.776c26.88 0 50.56-20.416 51.328-47.232a48.896 48.896 0 0 0-48.896-50.496z" p-id="23748" fill="#2c2c2c"></path></svg>
            <svg t="1747704178237" class="unfold-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23953" width="200" height="200"><path d="M911.35999999 668.16l-510.46399999 0c-24.57599999 0-45.056-21.504-45.056-48.12799999s19.968-48.128 45.056-48.12800001L911.35999999 571.904c24.57599999 0 45.056 21.504 45.05600001 48.128s-20.47999999 48.128-45.05600001 48.128z m1e-8-224.256l-510.464 0c-24.57599999 0-45.056-21.504-45.056-48.128s19.968-48.128 45.056-48.128L911.36 347.648c24.57599999 0 45.056 21.504 45.056 48.128s-20.47999999 48.128-45.056 48.128z m-3.584-216.064l-783.872 0c-26.624 0-48.128-21.504-48.128-48.128s21.504-48.128 48.128-48.128l783.872 0c26.624 0 48.128 21.504 48.128 48.128s-21.504 48.128-48.128 48.128zM75.77599999 348.16l224.25600001 160.256-224.256 160.256L75.77599999 348.16z m48.12800001 439.808l783.872 0c26.624 0 48.128 21.504 48.128 48.128s-21.504 48.128-48.128 48.128l-783.872 0c-26.624 0-48.128-21.504-48.128-48.128s22.016-48.128 48.128-48.128z" fill="#2c2c2c" p-id="23954"></path></svg>    
        </div>
        <div class="new">
            <a href="#">
                <svg t="1747704289738" class="new-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28660" width="200" height="200"><path d="M904.2 344.3c-21.5-50.7-52.2-96.3-91.3-135.4s-84.6-69.8-135.4-91.3C625 95.5 569.3 84.2 511.8 84.2S398.5 95.5 346 117.7c-50.7 21.5-96.3 52.2-135.4 91.3s-69.8 84.6-91.3 135.4c-22.2 52.5-33.5 108.3-33.5 165.8S97.1 623.5 119.3 676c21.5 50.7 52.2 96.3 91.3 135.4 39.1 39.1 84.6 69.8 135.4 91.3 52.5 22.2 108.3 33.5 165.8 33.5s113.3-11.3 165.8-33.5c50.7-21.5 96.3-52.2 135.4-91.3 39.1-39.1 69.8-84.6 91.3-135.4 22.2-52.5 33.5-108.3 33.5-165.8s-11.4-113.4-33.6-165.9zM511.8 876C310 876 145.9 711.8 145.9 510.1S310 144.2 511.8 144.2c201.7 0 365.9 164.1 365.9 365.9 0 201.7-164.2 365.9-365.9 365.9z" fill="#1684FC" p-id="28661"></path><path d="M737 481H542V286c0-16.5-13.5-30-30-30s-30 13.5-30 30v195H287c-16.5 0-30 13.5-30 30s13.5 30 30 30h195v195c0 16.5 13.5 30 30 30s30-13.5 30-30V541h195c16.5 0 30-13.5 30-30s-13.5-30-30-30z" fill="#1684FC" p-id="28662"></path></svg>
                <p>新对话</p>
            </a>
        </div>
        <div class="content">
            <div class="search">
                <svg t="1747535112502" class="search-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10858" width="200" height="200"><path d="M94.28134 596.789688a400.282438 400.282438 0 0 0 101.23928 170.062882 399.600002 399.600002 0 0 0 127.683648 86.055094c49.442439 21.087251 102.638272 31.835608 156.380054 31.596756 53.571173 0.102365 106.630519-10.645991 155.936471-31.596756a405.912529 405.912529 0 0 0 127.683649-86.055094 399.736489 399.736489 0 0 0 86.089215-127.71777c21.05313-49.408317 31.801486-102.638272 31.596756-156.380054a400.043585 400.043585 0 0 0-31.153173-156.380054 405.980773 405.980773 0 0 0-86.089215-127.683648 399.600002 399.600002 0 0 0-127.683649-86.055094 394.788833 394.788833 0 0 0-156.380054-31.596756 400.418925 400.418925 0 0 0-156.380054 31.596756 407.106791 407.106791 0 0 0-127.683648 86.055094 399.600002 399.600002 0 0 0-86.089216 127.683648 394.891199 394.891199 0 0 0-31.596755 156.380054c0 19.722381 1.398992 39.342396 4.26522 58.72356h19.108189l72.747606-123.043089a26.922073 26.922073 0 0 1 12.625053-12.625053 24.73828 24.73828 0 0 1 28.59404 5.118265l0.443583 0.545948c2.729741 2.797985 4.811169 6.141918 6.073674 9.758825l70.7003 167.606115 111.544053-386.258392a28.457553 28.457553 0 0 1 17.675075-18.596362c13.751072-4.43583 28.457553 3.753394 32.586286 18.391631l98.202443 339.340964h111.10047c2.183793 0 4.401708 0.307096 6.517258 0.887166 8.974024-17.060883 25.932542-28.559918 45.689044-28.559918 28.798771 0 52.206302 24.670037 52.206302 55.209017 0 30.538981-23.305166 55.209017-52.206302 55.209018-19.756503 0-36.71502-11.499035-45.689044-28.525797a22.349757 22.349757 0 0 1-6.517258 0.989531h-130.583998c-12.761541 0-23.202801-9.417607-25.591325-22.145026l-78.138844-270.073778-107.176467 370.425892a25.830177 25.830177 0 0 1-31.903852 18.493997 26.614978 26.614978 0 0 1-17.436222-15.627768l-79.298984-188.079175-55.550236 93.937222a25.727812 25.727812 0 0 1-23.066313 12.966271h-20.47306z m918.89916 372.50732a32.07446 32.07446 0 0 1-45.654923 45.177219l-172.110188-172.14431a476.442219 476.442219 0 0 1-315.831067 119.153207C214.901783 961.483124 0.173509 746.857215 0.173509 482.174676 0.173509 217.492137 214.799418 2.661498 479.584322 2.661498c264.819026 0 479.5473 214.728274 479.5473 479.513178a476.612828 476.612828 0 0 1-118.095432 314.875657l172.14431 172.246675z" fill="#1684FC" p-id="10859"></path></svg>
                <p>AI智能搜索</p>
            </div>
            <div class="classify active">
                <svg t="1747535745260" class="classify-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30114" width="200" height="200"><path d="M761.978355 509.439688c-46.817282 0-90.831728-18.231223-123.93466-51.334155l-61.620429-61.624523c-33.106002-33.102932-51.337225-77.116355-51.337225-123.932614s18.231223-90.831728 51.338249-123.93773l61.619406-61.619406c33.103956-33.103956 77.117378-51.335179 123.93466-51.335179s90.832751 18.231223 123.935684 51.335179l61.618383 61.619406c33.107025 33.106002 51.338249 77.121472 51.338249 123.93773s-18.231223 90.829681-51.338249 123.933637l-61.618383 61.623499C852.811106 491.208465 808.795637 509.439688 761.978355 509.439688zM761.978355 72.495104c-36.977169 0-71.739904 14.398942-97.886401 40.545438l-61.619406 61.619406c-26.14752 26.14752-40.547485 60.912301-40.547485 97.888448 0 36.975123 14.399965 71.737858 40.547485 97.883331l61.620429 61.625546c26.145473 26.14445 60.908208 40.544415 97.885378 40.544415 36.978193 0 71.739904-14.398942 97.886401-40.544415l61.618383-61.623499c26.148543-26.146497 40.548508-60.909232 40.548508-97.884354 0-36.976146-14.399965-71.739904-40.547485-97.888448l-61.619406-61.619406C833.718259 86.895069 798.956547 72.495104 761.978355 72.495104z" fill="#1684FC" p-id="30115"></path><path d="M289.508673 491.393683l-87.143733 0c-96.644107 0-175.270862-78.625732-175.270862-175.270862l0-87.148849c0-96.644107 78.625732-175.270862 175.270862-175.270862l87.143733 0c96.645131 0 175.270862 78.625732 175.270862 175.270862l0 87.148849C464.779535 412.766928 386.153804 491.393683 289.508673 491.393683zM202.364941 90.542132c-76.331479 0-138.431839 62.10036-138.431839 138.431839l0 87.148849c0 76.331479 62.10036 138.431839 138.431839 138.431839l87.143733 0c76.331479 0 138.431839-62.10036 138.431839-138.431839l0-87.148849c0-76.331479-62.10036-138.431839-138.431839-138.431839L202.364941 90.542132z" fill="#1684FC" p-id="30116"></path><path d="M805.549709 996.451574l-87.142709 0c-96.644107 0-175.270862-78.625732-175.270862-175.269839l0-87.148849c0-96.644107 78.626755-175.269839 175.270862-175.269839l87.142709 0c96.644107 0 175.270862 78.625732 175.270862 175.269839l0 87.148849C980.820572 917.825842 902.193817 996.451574 805.549709 996.451574zM718.407 595.601046c-76.332503 0-138.431839 62.10036-138.431839 138.430816l0 87.148849c0 76.331479 62.10036 138.430816 138.431839 138.430816l87.142709 0c76.332503 0 138.431839-62.10036 138.431839-138.430816l0-87.148849c0-76.331479-62.10036-138.430816-138.431839-138.430816L718.407 595.601046z" fill="#1684FC" p-id="30117"></path><path d="M289.508673 996.451574l-87.143733 0c-96.644107 0-175.270862-78.625732-175.270862-175.269839l0-87.148849c0-96.644107 78.625732-175.269839 175.270862-175.269839l87.143733 0c96.645131 0 175.270862 78.625732 175.270862 175.269839l0 87.148849C464.779535 917.825842 386.153804 996.451574 289.508673 996.451574zM202.364941 595.601046c-76.331479 0-138.431839 62.10036-138.431839 138.430816l0 87.148849c0 76.331479 62.10036 138.430816 138.431839 138.430816l87.143733 0c76.331479 0 138.431839-62.10036 138.431839-138.430816l0-87.148849c0-76.331479-62.10036-138.430816-138.431839-138.430816L202.364941 595.601046z" fill="#1684FC" p-id="30118"></path></svg>
                <p>AI工具分类</p>
            </div>
            <div class="workbench">
                <svg t="1747535871381" class="work-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34440" width="200" height="200"><path d="M755.2 837.6H272.9c-12.7 0-23.1 12-23.1 26.7s10.4 26.7 23.1 26.7h482.4c12.7 0 23.1-12 23.1-26.7s-10.4-26.7-23.2-26.7zM867.1 135.6H156.9c-25.3 0-45.9 20.5-45.9 45.9v516.4c0 25.3 20.5 45.9 45.9 45.9h710.3c25.3 0 45.9-20.5 45.9-45.9V181.5c-0.1-25.4-20.6-45.9-46-45.9z m-64.8 203.5L604 512.1c-16.3 14.3-40 16.8-59 6.3l-129.5-71.9c-3.2-1.8-7.3-1.2-9.8 1.5L280.1 580.5c-5.9 6.2-14.2 9.7-22.7 9.7-8.2 0-15.9-3.1-21.7-8.8-12.5-12-12.9-31.9-0.9-44.4l135.9-143.4c16.2-16.9 41.9-20.8 62.3-9.4l130.6 72.6c3 1.7 6.7 1.3 9.3-1l188.1-164c6.3-5.5 14.3-8.3 22.8-7.7 8.4 0.6 16 4.4 21.5 10.7 5.5 6.3 8.2 14.4 7.7 22.7-0.5 8.4-4.3 16.1-10.7 21.6z" fill="#1684FC" p-id="34441"></path></svg>
                <p>AI工作台</p>
            </div>
        </div>
        <div class="dialogue">
            <svg t="1747737833912" class="dialogue-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5063" width="200" height="200"><path d="M502.690909 912.290909c-225.838545 0-409.6-183.761455-409.6-409.6S276.852364 93.090909 502.690909 93.090909s409.6 183.761455 409.6 409.6a410.530909 410.530909 0 0 1-47.941818 192.418909 32.116364 32.116364 0 1 1-56.738909-30.254545 345.786182 345.786182 0 0 0 40.354909-162.164364c0-190.417455-154.903273-345.367273-345.320727-345.367273-190.417455 0-345.274182 154.949818-345.274182 345.367273 0 190.417455 154.903273 345.367273 345.320727 345.367273 61.533091 0 121.949091-16.384 174.638546-47.383273a32.162909 32.162909 0 0 1 32.581818 55.435636 409.506909 409.506909 0 0 1-207.220364 56.22691V912.290909z" fill="#515151" p-id="5064"></path><path d="M502.690909 534.807273a32.116364 32.116364 0 0 1-32.116364-32.116364V311.808a32.116364 32.116364 0 0 1 64.232728 0V502.690909a32.116364 32.116364 0 0 1-32.116364 32.116364z" fill="#515151" p-id="5065"></path><path d="M693.573818 534.807273H502.690909a32.116364 32.116364 0 0 1 0-64.232728h190.882909a32.116364 32.116364 0 0 1 0 64.232728z" fill="#515151" p-id="5066"></path></svg>
            <p>最近对话</p>
            <svg t="1747738174649" class="menu-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10730" width="200" height="200"><path d="M806.4 319.2L512 613.6 221.6 323.2 176 368l290.4 290.4L512 704l45.6-45.6 294.4-294.4z" p-id="10731"></path></svg>
            <div class="result">
                <a href=""></a>
            </div>
        </div>
        <div class="manage">
            <label>
                <svg t="1747738786839" class="manage-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15431" width="200" height="200"><path d="M510 425.1c-49.6 0-89.7 39.6-89.7 88.3 0 48.8 40.1 88.3 89.7 88.3 49.5 0 89.7-39.5 89.7-88.3 0-48.7-40.1-88.3-89.7-88.3z m313.8 423.3l25.3-24.9c28-27.6 28-72.3 0-99.9l-43.8-43.1c14.1-24.2 25.2-50.1 32.9-77.6h47.3c39.6 0 71.8-31.6 71.8-70.6V497c0-39-32.2-70.7-71.8-70.7h-46.8c-7.4-27.1-18-53-31.8-77l42.1-41.4c28-27.7 28-72.4 0-99.9l-25.3-25c-28-27.6-73.5-27.6-101.5 0L681 223.4c-25.2-14.5-52.5-25.7-81.3-33.5v-47.5c0-39-32.1-70.6-71.7-70.6h-35.9c-39.6 0-71.7 31.6-71.7 70.6V190c-28.8 7.8-56.1 19-81.3 33.5l-41.3-40.6c-28-27.6-73.5-27.6-101.5 0l-25.4 25c-28 27.5-28 72.3 0 99.9l42.1 41.4c-13.7 24-24.4 49.9-31.7 77h-46.8c-39.7 0-71.8 31.7-71.8 70.7v35.4c0 39 32.1 70.6 71.7 70.6h47.3c7.7 27.5 18.8 53.4 32.9 77.6l-43.8 43.1c-28 27.6-28 72.3 0 99.9l25.4 24.9c28 27.6 73.5 27.6 101.5 0l44-43.4c24.5 13.7 50.8 24.4 78.6 31.8v45.3c0 39 32.1 70.6 71.7 70.6h35.9c39.6 0 71.7-31.6 71.7-70.6v-45.3c27.8-7.4 54.1-18.1 78.5-31.8l44.1 43.4c28.1 27.6 73.6 27.6 101.6 0zM510 709.9c-109 0-197.3-87-197.3-194.2 0-107.4 88.4-194.3 197.3-194.3 109 0 197.3 86.9 197.3 194.3 0.1 107.2-88.3 194.2-197.3 194.2z" p-id="15432"></path></svg>
                <a href="#">系统管理</a>
            </label>
            <label>
                <svg t="1747738828625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20151" width="200" height="200"><path d="M64 127.712C64 92.512 92.864 64 128.288 64h255.424C419.232 64 448 92.8 448 127.712V896.32c0 35.2-28.864 63.712-64.288 63.712H128.32C92.768 960 64 931.2 64 896.288V127.68z m64 32.32v703.936c0 17.728 14.272 32.032 31.904 32.032h192.192c17.408 0 31.904-14.336 31.904-32V160c0-17.696-14.272-32-31.904-32H159.904C142.496 128 128 142.336 128 160z m384-31.744C512 92.768 540.704 64 576.192 64h319.616C931.264 64 960 92.864 960 128.288v255.424c0 35.52-28.704 64.288-64.192 64.288h-319.616A64.288 64.288 0 0 1 512 383.712V128.32z m64 31.616v192.192a32 32 0 0 0 31.84 31.904h256.32c17.28 0 31.84-14.272 31.84-31.904V159.904A32 32 0 0 0 864.16 128h-256.32c-17.28 0-31.84 14.272-31.84 31.904z m-64 416.288c0-35.456 28.704-64.192 64.192-64.192h319.616c35.456 0 64.192 28.704 64.192 64.192v319.616A64.16 64.16 0 0 1 895.808 960h-319.616A64.16 64.16 0 0 1 512 895.808v-319.616z m64 31.68v256.288c0 17.28 14.272 31.84 31.84 31.84h256.32c17.28 0 31.84-14.272 31.84-31.84v-256.32c0-17.28-14.272-31.84-31.84-31.84h-256.32c-17.28 0-31.84 14.272-31.84 31.84z" fill="#1296db" p-id="20152"></path></svg>
                <a href="#">模板</a>
            </label>
        </div>
        <div class="exit">
            <svg t="1747743022871" class="exit-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24912" width="200" height="200"><path d="M778.666667 202.666667H384v-64h458.666667v746.666666H384v-64h394.666667V202.666667z" fill="#d81e06" p-id="24913"></path><path d="M85.333333 522.496L362.752 682.666667v-97.706667h243.285333v-128H362.752V362.325333L85.333333 522.496z" fill="#d81e06" p-id="24914"></path></svg>
            <p>退出登录</p>
        </div>
    </div>

    <!-- 主内容区 - AI工具分类页面 -->
    <div class="main">
        <h1 class="title">AI工具分类</h1>
        
        <!-- 分类筛选 -->
        <div class="category-filter">
            <div class="filter-btn active" data-category="all">全部工具</div>
            <div class="filter-btn" data-category="reasoning">逻辑推理</div>
            <div class="filter-btn" data-category="writing">文本创作</div>
            <div class="filter-btn" data-category="coding">编程开发</div>
            <div class="filter-btn" data-category="multimodal">多模态</div>
            <div class="filter-btn" data-category="knowledge">知识问答</div>
        </div>
        
        <!-- AI工具卡片容器 -->
        <div class="ai-tools-container">
            <!-- DeepSeek 卡片 -->
            <div class="ai-card" data-categories="reasoning,coding">
                <div class="ai-card-header">
                    <div class="ai-icon">DS</div>
                    <div>
                        <div class="ai-name">DeepSeek</div>
                        <div class="ai-category">逻辑推理 · 编程开发</div>
                    </div>
                </div>
                <div class="ai-card-body">
                    <div class="ai-description">
                        深度求索推出的开源大模型，专注于逻辑推理和编程能力，擅长复杂问题解决和代码生成。
                    </div>
                    <div class="ai-strengths">
                        <h4>擅长领域</h4>
                        <ul class="strengths-list">
                            <li>复杂数学问题求解</li>
                            <li>算法设计与优化</li>
                            <li>代码调试与解释</li>
                            <li>逻辑推理与证明</li>
                        </ul>
                    </div>
                    <a href="https://deepseek.com" class="ai-link" target="_blank">访问官网</a>
                </div>
            </div>
            
            <!-- ChatGPT 卡片 -->
            <div class="ai-card" data-categories="writing,knowledge">
                <div class="ai-card-header">
                    <div class="ai-icon">CG</div>
                    <div>
                        <div class="ai-name">ChatGPT</div>
                        <div class="ai-category">文本创作 · 知识问答</div>
                    </div>
                </div>
                <div class="ai-card-body">
                    <div class="ai-description">
                        OpenAI开发的对话AI，在文本创作和知识问答方面表现出色，支持长文生成和创意写作。
                    </div>
                    <div class="ai-strengths">
                        <h4>擅长领域</h4>
                        <ul class="strengths-list">
                            <li>创意故事写作</li>
                            <li>商业文案撰写</li>
                            <li>百科知识问答</li>
                            <li>语言翻译与学习</li>
                        </ul>
                    </div>
                    <a href="https://chat.openai.com" class="ai-link" target="_blank">访问官网</a>
                </div>
            </div>
            
            <!-- Claude 卡片 -->
            <div class="ai-card" data-categories="reasoning,writing">
                <div class="ai-card-header">
                    <div class="ai-icon">CL</div>
                    <div>
                        <div class="ai-name">Claude</div>
                        <div class="ai-category">逻辑推理 · 文本创作</div>
                    </div>
                </div>
                <div class="ai-card-body">
                    <div class="ai-description">
                        Anthropic开发的AI助手，以长文处理和逻辑一致性著称，特别适合专业文档创作。
                    </div>
                    <div class="ai-strengths">
                        <h4>擅长领域</h4>
                        <ul class="strengths-list">
                            <li>长文总结与分析</li>
                            <li>专业报告撰写</li>
                            <li>法律合同解读</li>
                            <li>伦理决策支持</li>
                        </ul>
                    </div>
                    <a href="https://claude.ai" class="ai-link" target="_blank">访问官网</a>
                </div>
            </div>
            
            <!-- Gemini 卡片 -->
            <div class="ai-card" data-categories="multimodal,knowledge">
                <div class="ai-card-header">
                    <div class="ai-icon">GM</div>
                    <div>
                        <div class="ai-name">Gemini</div>
                        <div class="ai-category">多模态 · 知识问答</div>
                    </div>
                </div>
                <div class="ai-card-body">
                    <div class="ai-description">
                        谷歌推出的多模态AI，结合图像、文本和语音理解能力，擅长跨媒体内容分析。
                    </div>
                    <div class="ai-strengths">
                        <h4>擅长领域</h4>
                        <ul class="strengths-list">
                            <li>图像内容理解</li>
                            <li>多语言翻译</li>
                            <li>视频内容分析</li>
                            <li>跨媒体搜索</li>
                        </ul>
                    </div>
                    <a href="https://gemini.google.com" class="ai-link" target="_blank">访问官网</a>
                </div>
            </div>
            
            <!-- 文心一言 卡片 -->
            <div class="ai-card" data-categories="writing,multimodal">
                <div class="ai-card-header">
                    <div class="ai-icon">WX</div>
                    <div>
                        <div class="ai-name">文心一言</div>
                        <div class="ai-category">文本创作 · 多模态</div>
                    </div>
                </div>
                <div class="ai-card-body">
                    <div class="ai-description">
                        百度开发的中文大模型，在中文创作和图像生成方面表现优异，特别适合中文市场。
                    </div>
                    <div class="ai-strengths">
                        <h4>擅长领域</h4>
                        <ul class="strengths-list">
                            <li>中文诗歌创作</li>
                            <li>传统文学创作</li>
                            <li>中文商业文案</li>
                            <li>图像生成与设计</li>
                        </ul>
                    </div>
                    <a href="https://yiyan.baidu.com" class="ai-link" target="_blank">访问官网</a>
                </div>
            </div>
            
            <!-- Github Copilot 卡片 -->
            <div class="ai-card" data-categories="coding">
                <div class="ai-card-header">
                    <div class="ai-icon">GC</div>
                    <div>
                        <div class="ai-name">Github Copilot</div>
                        <div class="ai-category">编程开发</div>
                    </div>
                </div>
                <div class="ai-card-body">
                    <div class="ai-description">
                        面向开发者的AI编程助手，集成了代码自动补全、调试和文档生成功能。
                    </div>
                    <div class="ai-strengths">
                        <h4>擅长领域</h4>
                        <ul class="strengths-list">
                            <li>代码自动补全</li>
                            <li>函数注释生成</li>
                            <li>代码重构建议</li>
                            <li>错误诊断修复</li>
                        </ul>
                    </div>
                    <a href="https://copilot.github.com" class="ai-link" target="_blank">访问官网</a>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>© 汇问 - 为您提供专业的AI工具分类服务</p>
        </div>
    </div>

    <script>
        // 分类筛选功能
        document.addEventListener('DOMContentLoaded', function() {
            const filterButtons = document.querySelectorAll('.filter-btn');
            const aiCards = document.querySelectorAll('.ai-card');
            
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 更新按钮状态
                    filterButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    
                    const category = this.getAttribute('data-category');
                    
                    // 筛选卡片
                    aiCards.forEach(card => {
                        if (category === 'all') {
                            card.style.display = 'block';
                        } else {
                            const categories = card.getAttribute('data-categories').split(',');
                            if (categories.includes(category)) {
                                card.style.display = 'block';
                            } else {
                                card.style.display = 'none';
                            }
                        }
                        
                        // 添加动画效果
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, 50);
                    });
                });
            });
            
            // 初始显示所有卡片
            aiCards.forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'opacity 0.5s, transform 0.5s';
                
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, 100);
            });
        });
    </script>
</body>
</html>